<template>
    <div
        class="search-container"
        v-hasPerm="[`${searchConfig.pageName}:query`]"
    >
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <template
                v-for="(item, index) in searchConfig.formItems"
                :key="item.prop"
            >
                <el-form-item
                    v-show="isExpand ? true : index < showNumber"
                    :label="item.label"
                    :prop="item.prop"
                >
                    <!-- Input 输入框 -->
                    <template
                        v-if="item.type === 'input' || item.type === undefined"
                    >
                        <el-input
                            v-model="queryParams[item.prop]"
                            v-bind="item.attrs"
                            @keyup.enter="handleQuery"
                        />
                    </template>
                    <!-- Select 选择器 -->
                    <template v-else-if="item.type === 'select'">
                        <el-select
                            v-model="queryParams[item.prop]"
                            v-bind="item.attrs"
                        >
                            <template
                                v-for="option in item.options"
                                :key="option.value"
                            >
                                <el-option
                                    :label="option.label"
                                    :value="option.value"
                                />
                            </template>
                        </el-select>
                    </template>
                    <!-- TreeSelect 树形选择 -->
                    <template v-else-if="item.type === 'tree-select'">
                        <el-tree-select
                            v-model="queryParams[item.prop]"
                            v-bind="item.attrs"
                        />
                    </template>
                    <!-- DatePicker 日期选择器 -->
                    <template v-else-if="item.type === 'date-picker'">
                        <el-date-picker
                            v-model="queryParams[item.prop]"
                            v-bind="item.attrs"
                        />
                    </template>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button type="primary" icon="search" @click="handleQuery">
                    搜索
                </el-button>
                <el-button icon="refresh" @click="handleReset">重置</el-button>
                <!-- 展开/收起 -->
                <el-link
                    v-if="
                        isExpandable &&
                        searchConfig.formItems.length > showNumber
                    "
                    class="ml-2"
                    type="primary"
                    :underline="false"
                    @click="isExpand = !isExpand"
                >
                    <template v-if="isExpand"> 收起<i-ep-arrow-up /> </template>
                    <template v-else> 展开<i-ep-arrow-down /> </template>
                </el-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import type { IObject, IProps } from './types'
// state
const queryFormRef = ref<FormInstance>()
// 自定义事件
const emit = defineEmits<{
    queryClick: [queryParams: IObject]
    resetClick: [queryParams: IObject]
}>()
const props = defineProps<IProps>()
// 是否可展开/收缩
const isExpandable = ref(props.searchConfig.isExpandable ?? true)
// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
const showNumber = computed(() => {
    if (isExpandable.value === true) {
        return props.searchConfig.showNumber ?? 3
    } else {
        return props.searchConfig.formItems.length
    }
})
// 是否已展开
const isExpand = ref(false)

// 搜索表单数据
const queryParams = reactive<IObject>({})
for (const item of props.searchConfig.formItems) {
    queryParams[item.prop] = item.initialValue ?? ''
}

// action
// 查询操作
function handleQuery() {
    emit('queryClick', queryParams)
}
// 重置操作
function handleReset() {
    queryFormRef.value?.resetFields()
    emit('resetClick', queryParams)
}
// 获取分页数据
function getQueryParams() {
    return queryParams
}
// 钩子
// 暴露的属性和方法
defineExpose({ getQueryParams })
</script>

<style scoped></style>
